<!doctype html>
<html class="dark">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      .hot-category-box {
        position: fixed;
        width: 100vw;
        top: 64px;
        left: 0;
        z-index: 40;
      }

      .right-box-fixed {
        position: fixed;
        bottom: 60px;
      }

      @media not all and (min-width: 768px) {
        .right-with {
          min-width: 100vw;
        }
      }

      /* 定义滚动条样式 */
      ::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: rgba(0, 0, 0, 1);
      }

      /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-track {
        box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.5);
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.5);
      }

      /*定义滑块 内阴影+圆角*/
      ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 0px rgba(0, 0, 0, 0.5);
        background-color: rgba(177, 112, 92, 0.5);
        cursor: pointer;
      }

      /* 定义滚动条样式 */
      #hot-category-box > div::-webkit-scrollbar {
        display: none;
      }
    </style>
  </head>

  <body class="dark:bg-zinc-900 bg-zinc-300">
    <!-- 导航开始 -->
    <nav
      class="bg-white z-50 dark:bg-gray-900 fixed w-full top-0 start-0"
      id="nav-box"
    >
      <div
        class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4"
      >
        <!-- 移动端下级菜单开始 -->
        <button
          data-collapse-toggle="mega-menu-full"
          id="toggle-btn"
          type="button"
          class="inline-flex text-gray-800 dark:text-white items-center p-2 w-10 h-10 justify-center text-sm rounded-lg xl:hidden"
          aria-controls="navbar-sticky"
          aria-expanded="false"
        >
          <span class="sr-only">Open main menu</span>
          <svg
            class="w-5 h-5"
            aria-hidden="true"
            class="w-6 h-6"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 17 14"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M1 1h15M1 7h15M1 13h15"></path>
          </svg>
        </button>
        <!-- 移动端下级菜单结束 -->
        <!-- logo开始 -->
        <a
          href="https://flowbite.com/"
          class="flex items-center space-x-3 rtl:space-x-reverse"
        >
          <img
            src="https://flowbite.com/docs/images/logo.svg"
            class="h-8"
            alt="Flowbite Logo"
          />
          <span
            class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
            >Flowbite</span
          >
        </a>
        <!-- logo结束 -->
        <!-- 工具栏开始 -->
        <div class="flex xl:order-2 space-x-3 xl:space-x-0 rtl:space-x-reverse">
          <button
            type="button"
            class="text-white font-medium rounded-lg text-sm text-center"
          >
            <svg
              class="w-6 h-6 text-gray-800 dark:text-white"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="none"
              viewBox="0 0 24 24"
            >
              <path
                stroke="currentColor"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M12 21a9 9 0 1 0 0-18 9 9 0 0 0 0 18Zm0 0a8.949 8.949 0 0 0 4.951-1.488A3.987 3.987 0 0 0 13 16h-2a3.987 3.987 0 0 0-3.951 3.512A8.948 8.948 0 0 0 12 21Zm3-11a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"
              ></path>
            </svg></button
          >

          <!-- 移动端侧边按钮开始 -->
          <button
            type="button"
            id="nav-left-btn"
            class="xl:hidden font-medium rounded-lg text-sm text-center"
          >
            <svg
              class="w-6 h-6 text-gray-800 dark:text-white"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              width="24"
              height="24"
              fill="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                fill-rule="evenodd"
                d="M5 6a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm0 12a1 1 0 0 1 1-1h12a1 1 0 1 1 0 2H6a1 1 0 0 1-1-1Zm3.85-9.76A1 1 0 0 1 10.5 9v6a1 1 0 0 1-1.65.76l-3.5-3a1 1 0 0 1 0-1.52l3.5-3ZM12 10a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Zm0 4a1 1 0 0 1 1-1h5a1 1 0 1 1 0 2h-5a1 1 0 0 1-1-1Z"
                clip-rule="evenodd"></path>
            </svg>
          </button>
          <!-- 移动端侧边按钮结束 -->
        </div>
        <!-- 工具栏结束 -->
        <!-- 菜单下拉开始 -->
        <div
          id="mega-menu-full"
          class="items-center justify-between font-medium hidden w-full xl:flex xl:w-auto xl:order-1"
        >
          <ul
            class="flex max-xl:h-screen flex-col p-4 xl:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 xl:space-x-8 rtl:space-x-reverse xl:flex-row xl:mt-0 xl:border-0 xl:bg-white dark:bg-gray-800 xl:dark:bg-gray-900 dark:border-gray-700"
          >
            <li>
              <a
                href="#"
                class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:p-0 dark:text-white dark:hover:bg-gray-700 xl:dark:hover:bg-transparent dark:border-gray-700"
                aria-current="page">Home</a
              >
            </li>
            <li class="menu-dropdown" data-toggle="mega-menu-full-dropdown-1">
              <button
                class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded xl:w-auto hover:bg-gray-100 xl:hover:bg-transparent xl:border-0 xl:hover:text-blue-600 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700"
                >Company
                <svg
                  class="w-2.5 h-2.5 ms-2.5"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 10 6"
                >
                  <path
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="m1 1 4 4 4-4"></path>
                </svg></button
              >
            </li>
            <li class="menu-dropdown" data-toggle="mega-menu-full-dropdown-2">
              <button
                class="flex items-center justify-between w-full py-2 px-3 text-gray-900 rounded xl:w-auto hover:bg-gray-100 xl:hover:bg-transparent xl:border-0 xl:hover:text-blue-600 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700"
                >Company
                <svg
                  class="w-2.5 h-2.5 ms-2.5"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  fill="none"
                  viewBox="0 0 10 6"
                >
                  <path
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="m1 1 4 4 4-4"></path>
                </svg></button
              >
            </li>
            <li>
              <a
                href="#"
                class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:hover:text-blue-700 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700"
                >Marketplace</a
              >
            </li>
            <li>
              <a
                href="#"
                class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:hover:text-blue-700 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700"
                >Resources</a
              >
            </li>
            <li>
              <a
                href="#"
                class="block py-2 px-3 text-gray-900 rounded hover:bg-gray-100 xl:hover:bg-transparent xl:hover:text-blue-700 xl:p-0 dark:text-white xl:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-blue-500 xl:dark:hover:bg-transparent dark:border-gray-700"
                >Contact</a
              >
            </li>
          </ul>
        </div><!-- 移动端结束 -->
      </div>

      <!-- 抽屉盒子开始 -->
      <div>
        <div
          id="mega-menu-full-dropdown-1"
          class="mega-menu-full-dropdown rounded-lg bg-white dark:bg-gray-800 max-xl:min-h-screen max-xl:fixed max-xl:top-16 max-xl:w-screen mt-1 shadow-sm hidden"
        >
          <div
            class="grid max-w-screen-xl mx-auto rounded-lg dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white sm:grid-cols-2 max-xl:mx-4"
          >
            <ul>
              <li class="xl:hidden">
                <a
                  href="#"
                  id="mega-menu-full-dropdown-1-close"
                  class="close-dropdown-btn block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Online Stores</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools 测试专用</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Segmentation</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Marketing CRM</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
            </ul>
            <ul>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Online Stores</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Segmentation</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Marketing CRM</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
            </ul>
          </div>
        </div>

        <div
          id="mega-menu-full-dropdown-2"
          class="mega-menu-full-dropdown rounded-lg shadow-lg bg-white dark:bg-gray-800 max-xl:min-h-screen max-xl:fixed max-xl:top-16 max-xl:w-screen mt-1 hidden"
        >
          <div
            class="grid max-w-screen-xl mx-auto dark:bg-gray-800 dark:border-gray-600 text-gray-900 dark:text-white sm:grid-cols-2 max-xl:mx-4"
          >
            <ul>
              <li class="xl:hidden">
                <a
                  href="#"
                  id="mega-menu-full-dropdown-2-close"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Online Stores</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools 测试专用</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Segmentation不宜天涯</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Marketing CRM</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
            </ul>
            <ul>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Online Stores</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Segmentation</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
              <li>
                <a
                  href="#"
                  class="block p-3 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700"
                >
                  <div class="font-semibold">Marketing CRM</div>
                  <span class="text-sm text-gray-500 dark:text-gray-400"
                    >Connect with third-party tools that you're already using.</span
                  >
                </a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!-- 抽屉盒子结束 -->
    </nav>
    <!-- 导航结束 -->
    <!-- 轮播开始 -->
    <div
      id="default-carousel"
      class="relative w-full cursor-pointer"
      data-carousel="slide"
    >
      <!-- Carousel wrapper -->
      <div style="height: 500px;" class="relative overflow-hidden rounded-lg">
        <!-- Item 1 -->
        <div
          class="hidden bg-blue-700 duration-700 ease-in-out"
          data-carousel-item
        >
        </div>
        <!-- Item 2 -->
        <div
          class="hidden bg-blue-700 duration-700 ease-in-out"
          data-carousel-item
        >
        </div>
        <!-- Item 3 -->
        <div
          class="hidden bg-blue-700 duration-700 ease-in-out"
          data-carousel-item
        >
        </div>
        <!-- Item 4 -->
        <div
          class="hidden bg-blue-700 duration-700 ease-in-out"
          data-carousel-item
        >
        </div>
        <!-- Item 5 -->
        <div
          class="hidden bg-blue-700 duration-700 ease-in-out"
          data-carousel-item
        >
        </div>
      </div>
      <!-- Slider indicators -->
      <div
        class="absolute z-30 bottom-7 flex -translate-x-1/2 left-1/2 space-x-3 rtl:space-x-reverse"
      >
        <button
          type="button"
          class="w-3 h-3 rounded-full"
          aria-current="true"
          aria-label="Slide 1"
          data-carousel-slide-to="0"></button>
        <button
          type="button"
          class="w-3 h-3 rounded-full"
          aria-current="false"
          aria-label="Slide 2"
          data-carousel-slide-to="1"></button>
        <button
          type="button"
          class="w-3 h-3 rounded-full"
          aria-current="false"
          aria-label="Slide 3"
          data-carousel-slide-to="2"></button>
        <button
          type="button"
          class="w-3 h-3 rounded-full"
          aria-current="false"
          aria-label="Slide 4"
          data-carousel-slide-to="3"></button>
        <button
          type="button"
          class="w-3 h-3 rounded-full"
          aria-current="false"
          aria-label="Slide 5"
          data-carousel-slide-to="4"></button>
      </div>
      <!-- Slider controls -->
      <button
        type="button"
        class="absolute top-0 start-16 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
        data-carousel-prev
      >
        <span
          class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
        >
          <svg
            class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 6 10"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M5 1 1 5l4 4"></path>
          </svg>
          <span class="sr-only">Previous</span>
        </span>
      </button>
      <button
        type="button"
        class="absolute top-0 end-16 z-30 flex items-center justify-center h-full px-4 cursor-pointer group focus:outline-none"
        data-carousel-next
      >
        <span
          class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-white/30 dark:bg-gray-800/30 group-hover:bg-white/50 dark:group-hover:bg-gray-800/60 group-focus:ring-4 group-focus:ring-white dark:group-focus:ring-gray-800/70 group-focus:outline-none"
        >
          <svg
            class="w-4 h-4 text-white dark:text-gray-800 rtl:rotate-180"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 6 10"
          >
            <path
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="m1 9 4-4-4-4"></path>
          </svg>
          <span class="sr-only">Next</span>
        </span>
      </button>
    </div>
    <!-- 轮播结束 -->

    <!-- Banner开始 -->
    <div class="relative bottom-10 z-40 max-xl:top-0">
      <div
        id="tab"
        class="max-w-screen-xl overflow-hidden max-xl:pb-4 pt-4 pb-0 cursor-pointer flex flex-nowrap mx-auto px-4"
      >
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg"
            alt=""
          />
        </div>
        <div class="shrink-0 h-40 m-2 overflow-hidden rounded-lg">
          <img
            class="h-40 w-48 transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
            src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg"
            alt=""
          />
        </div>
      </div>
    </div>
    <!-- Banner结束 -->

    <!-- 内容区域开始 -->
    <div
      class="max-w-screen-xl max-xl:w-screen flex overflow-hidden max-xl:justify-center justify-between mx-auto px-2"
    >
      <div class="grow">
        <div
          id="hot-category-box"
          class="bg-white dark:bg-gray-900 mb-2 rounded-lg"
        >
          <!-- tab头部开始 -->
          <div
            class="max-w-screen-xl dark:bg-gray-900 rounded-lg max-xl:w-screen flex flex-nowrap items-center overflow-hidden max-xl:overflow-auto justify-between mx-auto"
          >
            <ul
              class="flex max-w-3xl flex-nowrap text-sm font-medium text-center relative"
              id="default-styled-tab"
              data-tabs-toggle="#default-styled-tab-content"
              data-tabs-active-classes="text-purple-600 hover:text-purple-600 dark:text-purple-500 dark:hover:text-purple-500 border-red-950 dark:border-red-950"
              data-tabs-inactive-classes="dark:border-transparent text-gray-500 hover:text-gray-600 dark:text-gray-400 border-gray-100 hover:border-gray-300 dark:border-gray-700 dark:hover:text-gray-300"
              role="tablist"
            >
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="profile-styled-tab"
                  data-tabs-target="#styled-profile"
                  type="button"
                  role="tab"
                  aria-controls="profile"
                  aria-selected="false">Profile</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="dashboard-styled-tab"
                  data-tabs-target="#styled-dashboard"
                  type="button"
                  role="tab"
                  aria-controls="dashboard"
                  aria-selected="false">Dashboard</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">Contacts</button
                >
              </li>
              <li class="me-2" role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="settings-styled-tab"
                  data-tabs-target="#styled-settings"
                  type="button"
                  role="tab"
                  aria-controls="settings"
                  aria-selected="false">Settings</button
                >
              </li>
              <li role="presentation">
                <button
                  class="inline-block p-4 border-b-2 rounded-t-lg hover:text-gray-600 hover:border-gray-300 dark:hover:text-gray-300"
                  id="contacts-styled-tab"
                  data-tabs-target="#styled-contacts"
                  type="button"
                  role="tab"
                  aria-controls="contacts"
                  aria-selected="false">fdf</button
                >
              </li>
            </ul>
          </div>
          <!-- tab头部结束 -->
        </div>
        <!-- 主内容开始 -->
        <div id="hot-category-content">
          <div
            class="p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
            id="styled-profile"
            role="tabpanel"
            aria-labelledby="profile-tab"
          >
            <p class="text-sm text-gray-500 dark:text-gray-400">
              This is some placeholder content the <strong
                class="font-medium text-gray-800 dark:text-white"
                >Profile tab's associated content</strong
              >. Clicking another tab will toggle the visibility of this one for
              the next. The tab JavaScript swaps classes to control the content
              visibility and styling.
            </p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
            <p>1</p>
          </div>
          <div
            class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
            id="styled-dashboard"
            role="tabpanel"
            aria-labelledby="dashboard-tab"
          >
            <div class="grid grid-cols-6 gap-4">
              <div class="col-start-1 col-end-5 ...">
                <div class="card-list-body text-wrap">
                  <a
                    href="blog-read.html"
                    class="text-blue-600 visited:text-purple-600"
                  >
                    <h3
                      class="text-xl dark:text-white font-semibold text-slate-900"
                    >
                      Top amazing web demos and experiments in 2024 should know
                      about
                    </h3>
                  </a>
                  <p class="card-list-text">
                    consectetuer adipiscing elit, sed diam nonummy nibh euismod
                    tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut
                    wisi enim ad minim veniam,
                  </p>
                  <div class="flex items-center gap-3">
                    <a href="timeline.html">
                      <img
                        src="assets/images/avatars/avatar-7.jpg"
                        alt=""
                        class="bg-gray-200 rounded-full w-10 h-10"
                      />
                    </a>
                    <div class="flex-1">
                      <a href="timeline.html">
                        <h4
                          class="font-semibold text-sm text-black dark:text-white"
                        >
                          Johnson smith
                        </h4>
                      </a>
                      <div class="mt-0.5">Suggested For You</div>
                    </div>
                    <button
                      type="button"
                      class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                    >
                      Follow
                    </button>
                  </div>
                  <div class="flex justify-start text-xs mt-2 mb-2">
                    <span>27 weeks ago</span>
                    <span class="xl:block hidden">·</span>
                    <span> 156.9K views</span>
                  </div>
                  <div>
                    <span
                      class="bg-blue-100 text-blue-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-blue-900 dark:text-blue-300"
                      >Default</span
                    >
                    <span
                      class="bg-gray-100 text-gray-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-gray-700 dark:text-gray-300"
                      >Dark</span
                    >
                    <span
                      class="bg-red-100 text-red-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-red-900 dark:text-red-300"
                      >Red</span
                    >
                    <span
                      class="bg-green-100 text-green-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-green-900 dark:text-green-300"
                      >Green</span
                    >
                    <span
                      class="bg-yellow-100 text-yellow-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-yellow-900 dark:text-yellow-300"
                      >Yellow</span
                    >
                    <span
                      class="bg-indigo-100 text-indigo-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-indigo-900 dark:text-indigo-300"
                      >Indigo</span
                    >
                    <span
                      class="bg-purple-100 text-purple-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-purple-900 dark:text-purple-300"
                      >Purple</span
                    >
                    <span
                      class="bg-pink-100 text-pink-800 text-xs font-medium me-2 px-2.5 py-0.5 rounded dark:bg-pink-900 dark:text-pink-300"
                      >Pink</span
                    >
                  </div>
                </div>
              </div>
              <div class="col-start-5 col-span-3 ...">
                <img
                  class="h-full w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                  alt=""
                />
              </div>
            </div>
          </div>
          <div
            class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
            id="styled-settings"
            role="tabpanel"
            aria-labelledby="settings-tab"
          >
            <p class="text-sm text-gray-500 dark:text-gray-400">
              This is some placeholder content the <strong
                class="font-medium text-gray-800 dark:text-white"
                >Settings tab's associated content</strong
              >. Clicking another tab will toggle the visibility of this one for
              the next. The tab JavaScript swaps classes to control the content
              visibility and styling.
            </p>
          </div>
          <div
            class="hidden p-4 rounded-lg bg-gray-50 dark:bg-gray-800"
            id="styled-contacts"
            role="tabpanel"
            aria-labelledby="contacts-tab"
          >
            <p class="text-sm text-gray-500 dark:text-gray-400">
              This is some placeholder content the <strong
                class="font-medium text-gray-800 dark:text-white"
                >Contacts tab's associated content</strong
              >. Clicking another tab will toggle the visibility of this one for
              the next. The tab JavaScript swaps classes to control the content
              visibility and styling.
            </p>
          </div>
        </div>
        <!-- 主内容结束 -->
      </div>
      <!-- 侧边 -->
      <div
        class="grow-0 shrink-0 right-with max-xl:overflow-auto max-xl:hidden max-xl:h-screen max-xl:fixed max-xl:top-16 max-xl:z-50 h-fit max-w-96"
        id="right-box-fixed"
      >
        <div class="shrink-0 max-xl:mx-0 ml-2 mb-2 overflow-hidden rounded-lg">
          <div
            class="columns-2xs dark:text-white bg-white dark:bg-gray-800 dark:border-gray-700"
          >
            <div class="w-full max-w-sm rounded-lg">
              <div class="flex justify-end px-4 pt-4">
                <button
                  id="dropdownButton"
                  data-dropdown-toggle="dropdown"
                  class="inline-block text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:ring-4 focus:outline-none focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-1.5"
                  type="button"
                >
                  <span class="sr-only">Open dropdown</span>
                  <svg
                    class="w-5 h-5"
                    aria-hidden="true"
                    xmlns="http://www.w3.org/2000/svg"
                    fill="currentColor"
                    viewBox="0 0 16 3"
                  >
                    <path
                      d="M2 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Zm6.041 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM14 0a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3Z"
                    ></path>
                  </svg>
                </button>
                <!-- Dropdown menu -->
                <div
                  id="dropdown"
                  class="z-10 hidden text-base list-none bg-white divide-y divide-gray-100 rounded-lg shadow w-44 dark:bg-gray-700"
                >
                  <ul class="py-2" aria-labelledby="dropdownButton">
                    <li>
                      <a
                        href="#"
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                        >Edit</a
                      >
                    </li>
                    <li>
                      <a
                        href="#"
                        class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                        >Export Data</a
                      >
                    </li>
                    <li>
                      <a
                        href="#"
                        class="block px-4 py-2 text-sm text-red-600 hover:bg-gray-100 dark:hover:bg-gray-600 dark:text-gray-200 dark:hover:text-white"
                        >Delete</a
                      >
                    </li>
                  </ul>
                </div>
              </div>
              <div class="flex flex-col items-center pb-10">
                <img
                  class="w-24 h-24 mb-3 rounded-full shadow-lg"
                  src="/docs/images/people/profile-picture-3.jpg"
                  alt="Bonnie image"
                />
                <h5
                  class="mb-1 text-xl font-medium text-gray-900 dark:text-white"
                >
                  Bonnie Green
                </h5>
                <span class="text-sm text-gray-500 dark:text-gray-400"
                  >Visual Designer</span
                >
                <div class="flex mt-4 xl:mt-6">
                  <a
                    href="#"
                    class="inline-flex items-center px-4 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
                    >Add friend</a
                  >
                  <a
                    href="#"
                    class="py-2 px-4 ms-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
                    >Message</a
                  >
                </div>
              </div>
            </div>
          </div>
        </div>

        <div
          class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg"
        >
          <div
            class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700"
          >
            <svg
              class="w-7 h-7 text-gray-500 dark:text-gray-400 mb-3"
              aria-hidden="true"
              xmlns="http://www.w3.org/2000/svg"
              fill="currentColor"
              viewBox="0 0 20 20"
            >
              <path
                d="M18 5h-.7c.229-.467.349-.98.351-1.5a3.5 3.5 0 0 0-3.5-3.5c-1.717 0-3.215 1.2-4.331 2.481C8.4.842 6.949 0 5.5 0A3.5 3.5 0 0 0 2 3.5c.003.52.123 1.033.351 1.5H2a2 2 0 0 0-2 2v3a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1V7a2 2 0 0 0-2-2ZM8.058 5H5.5a1.5 1.5 0 0 1 0-3c.9 0 2 .754 3.092 2.122-.219.337-.392.635-.534.878Zm6.1 0h-3.742c.933-1.368 2.371-3 3.739-3a1.5 1.5 0 0 1 0 3h.003ZM11 13H9v7h2v-7Zm-4 0H2v5a2 2 0 0 0 2 2h3v-7Zm6 0v7h3a2 2 0 0 0 2-2v-5h-5Z"
              ></path>
            </svg>
            <a href="#">
              <h5
                class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white"
              >
                Need a help in Claim? step by step guideline
              </h5>
            </a>
            <span class="mb-3 font-normal text-gray-500 dark:text-gray-400"
              >Go to this step by step guideline process on how to certify for
              your weekly benefits:</span
            >
            <br />
            <a
              href="#"
              class="inline-flex font-medium items-center text-blue-600 hover:underline"
            >
              See our guideline
              <svg
                class="w-3 h-3 ms-2.5 rtl:rotate-[270deg]"
                aria-hidden="true"
                xmlns="http://www.w3.org/2000/svg"
                fill="none"
                viewBox="0 0 18 18"
              >
                <path
                  stroke="currentColor"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                  stroke-width="2"
                  d="M15 11v4.833A1.166 1.166 0 0 1 13.833 17H2.167A1.167 1.167 0 0 1 1 15.833V4.167A1.166 1.166 0 0 1 2.167 3h4.618m4.447-2H17v5.768M9.111 8.889l7.778-7.778"
                ></path>
              </svg>
            </a>
          </div>
        </div>

        <div
          class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg"
        >
          <div
            class="columns-2xs bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700"
          >
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
            <div class="m-2 overflow-hidden rounded-lg">
              <a>
                <img
                  class="h-40 w-full transition ease-in-out delay-150 bg-blue-500 hover:-translate-y-1 hover:scale-110 hover:bg-indigo-500 duration-300"
                  src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg"
                />
              </a>
            </div>
          </div>
        </div>

        <div
          class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg"
        >
          <div
            class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700"
          >
            <div class="flex justify-between">
              <h3 class="font-bold text-base">Peaple You might know</h3>
              <button type="button">
                <ion-icon
                  name="sync-outline"
                  class="text-xl xl hydrated"
                  role="img"
                  aria-label="sync outline"></ion-icon>
              </button>
            </div>
            <div
              class="space-y-4 capitalize text-xs font-normal mt-5 mb-2 text-gray-500 dark:text-white/80"
            >
              <div class="flex items-center gap-3">
                <a href="timeline.html">
                  <img
                    src="assets/images/avatars/avatar-7.jpg"
                    alt=""
                    class="bg-gray-200 rounded-full w-10 h-10"
                  />
                </a>
                <div class="flex-1">
                  <a href="timeline.html">
                    <h4
                      class="font-semibold text-sm text-black dark:text-white"
                    >
                      Johnson smith
                    </h4>
                  </a>
                  <div class="mt-0.5">Suggested For You</div>
                </div>
                <button
                  type="button"
                  class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                >
                  Follow
                </button>
              </div>
              <div class="flex items-center gap-3">
                <a href="timeline.html">
                  <img
                    src="assets/images/avatars/avatar-5.jpg"
                    alt=""
                    class="bg-gray-200 rounded-full w-10 h-10"
                  />
                </a>
                <div class="flex-1">
                  <a href="timeline.html">
                    <h4
                      class="font-semibold text-sm text-black dark:text-white"
                    >
                      James Lewis
                    </h4>
                  </a>
                  <div class="mt-0.5">Followed by Johnson</div>
                </div>
                <button
                  type="button"
                  class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                >
                  Follow
                </button>
              </div>
              <div class="flex items-center gap-3">
                <a href="timeline.html">
                  <img
                    src="assets/images/avatars/avatar-2.jpg"
                    alt=""
                    class="bg-gray-200 rounded-full w-10 h-10"
                  />
                </a>
                <div class="flex-1">
                  <a href="timeline.html">
                    <h4
                      class="font-semibold text-sm text-black dark:text-white"
                    >
                      John Michael
                    </h4>
                  </a>
                  <div class="mt-0.5">Followed by Monroe</div>
                </div>
                <button
                  type="button"
                  class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                >
                  Follow
                </button>
              </div>
              <div class="flex items-center gap-3">
                <a href="timeline.html">
                  <img
                    src="assets/images/avatars/avatar-3.jpg"
                    alt=""
                    class="bg-gray-200 rounded-full w-10 h-10"
                  />
                </a>
                <div class="flex-1">
                  <a href="timeline.html">
                    <h4
                      class="font-semibold text-sm text-black dark:text-white"
                    >
                      Monroe Parker
                    </h4>
                  </a>
                  <div class="mt-0.5">Suggested For You</div>
                </div>
                <button
                  type="button"
                  class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                >
                  Follow
                </button>
              </div>
              <div class="flex items-center gap-3">
                <a href="timeline.html">
                  <img
                    src="assets/images/avatars/avatar-4.jpg"
                    alt=""
                    class="bg-gray-200 rounded-full w-10 h-10"
                  />
                </a>
                <div class="flex-1">
                  <a href="timeline.html">
                    <h4
                      class="font-semibold text-sm text-black dark:text-white"
                    >
                      Martin Gray
                    </h4>
                  </a>
                  <div class="mt-0.5">Suggested For You</div>
                </div>
                <button
                  type="button"
                  class="text-sm rounded-full py-1.5 px-4 font-semibold bg-secondery"
                >
                  Follow
                </button>
              </div>
            </div>
          </div>
        </div>

        <div
          class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg"
        >
          <div
            class="columns-2xs p-2 bg-white dark:text-white dark:bg-gray-800 dark:border-gray-700"
          >
            <div class="">
              <h2 class="mb-2 flex items-center text-lg font-semibold">
                <svg
                  class="w-6 h-6"
                  aria-hidden="true"
                  xmlns="http://www.w3.org/2000/svg"
                  width="24"
                  height="24"
                  fill="none"
                  viewBox="0 0 24 24"
                >
                  <path
                    stroke="currentColor"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                    stroke-width="2"
                    d="M4 4v15a1 1 0 0 0 1 1h15M8 16l2.5-5.5 3 3L17.273 7 20 9.667"
                  ></path>
                </svg><span>站点信息</span>
              </h2>
              <ul class="ml-2 max-w-xl space-y-1 list-disc list-insid">
                <li class="flex justify-between mr-8">
                  <span>文章数目:</span><span>99</span>
                </li>
                <li class="flex justify-between mr-8">
                  <span>运行时间:</span><span>99</span>
                </li>
                <li class="flex justify-between mr-8">
                  <span>最后更新时间:</span><span>99</span>
                </li>
                <li class="flex justify-between mr-8">
                  <span>最后更新时间:</span><span>99</span>
                </li>
              </ul>
            </div>
          </div>
        </div>

        <div
          class="shrink-0 max-xl:mx-0 mt-2 ml-2 mb-2 overflow-hidden rounded-lg"
        >
          <footer
            class="dark:text-white bg-white dark:bg-gray-800 dark:border-gray-700"
          >
            <div class="w-full p-4 xl:py-4">
              <div>
                <a
                  href="https://flowbite.com/"
                  class="flex items-center mb-4 sm:mb-0 space-x-3 rtl:space-x-reverse"
                >
                  <img
                    src="https://flowbite.com/docs/images/logo.svg"
                    class="h-8"
                    alt="Flowbite Logo"
                  />
                  <span
                    class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white"
                    >Flowbite</span
                  >
                </a>
                <div class="grid justify-items-stretch mt-2">
                  <button
                    type="button"
                    class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
                    >Default</button
                  >
                  <button
                    type="button"
                    class="py-2.5 px-5 me-2 mb-2 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100 dark:focus:ring-gray-700 dark:bg-gray-800 dark:text-gray-400 dark:border-gray-600 dark:hover:text-white dark:hover:bg-gray-700"
                    >Alternative</button
                  >
                  <button
                    type="button"
                    class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700"
                    >Dark</button
                  >
                  <button
                    type="button"
                    class="text-gray-900 bg-white border border-gray-300 focus:outline-none hover:bg-gray-100 focus:ring-4 focus:ring-gray-100 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:focus:ring-gray-700"
                    >Light</button
                  >
                  <button
                    type="button"
                    class="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
                    >Green</button
                  >
                  <button
                    type="button"
                    class="focus:outline-none text-white bg-red-700 hover:bg-red-800 focus:ring-4 focus:ring-red-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-red-600 dark:hover:bg-red-700 dark:focus:ring-red-900"
                    >Red</button
                  >
                  <button
                    type="button"
                    class="focus:outline-none text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-4 focus:ring-yellow-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:focus:ring-yellow-900"
                    >Yellow</button
                  >
                </div>
              </div>
              <hr
                class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8"
              />
              <span
                class="block text-sm text-gray-500 sm:text-center dark:text-gray-400"
                >© 2023 <a href="https://flowbite.com/" class="hover:underline"
                  >Flowbite™</a
                >. All Rights Reserved.</span
              >
            </div>
          </footer>
        </div>
      </div>
    </div>

    <!-- 底部右侧工具按钮 -->
    <div data-dial-init class="fixed z-50 end-6 bottom-6 group">
      <div
        id="speed-dial-menu-vertical"
        class="flex flex-col items-center hidden mb-4 space-y-2"
      >
        <button
          type="button"
          data-tooltip-target="tooltip-share"
          data-tooltip-placement="left"
          class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400"
        >
          <svg
            class="w-5 h-5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 18 18"
          >
            <path
              d="M14.419 10.581a3.564 3.564 0 0 0-2.574 1.1l-4.756-2.49a3.54 3.54 0 0 0 .072-.71 3.55 3.55 0 0 0-.043-.428L11.67 6.1a3.56 3.56 0 1 0-.831-2.265c.006.143.02.286.043.428L6.33 6.218a3.573 3.573 0 1 0-.175 4.743l4.756 2.491a3.58 3.58 0 1 0 3.508-2.871Z"
            ></path>
          </svg>
          <span class="sr-only">Share</span>
        </button>
        <div
          id="tooltip-share"
          role="tooltip"
          class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
        >
          Share
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button
          type="button"
          data-tooltip-target="tooltip-print"
          data-tooltip-placement="left"
          class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400"
        >
          <svg
            class="w-5 h-5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path d="M5 20h10a1 1 0 0 0 1-1v-5H4v5a1 1 0 0 0 1 1Z"></path>
            <path
              d="M18 7H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2v-3a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v3a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2Zm-1-2V2a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v3h14Z"
            ></path>
          </svg>
          <span class="sr-only">Print</span>
        </button>
        <div
          id="tooltip-print"
          role="tooltip"
          class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
        >
          Print
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button
          type="button"
          data-tooltip-target="tooltip-download"
          data-tooltip-placement="left"
          class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 shadow-sm dark:hover:text-white dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400"
        >
          <svg
            class="w-5 h-5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 20 20"
          >
            <path
              d="M14.707 7.793a1 1 0 0 0-1.414 0L11 10.086V1.5a1 1 0 0 0-2 0v8.586L6.707 7.793a1 1 0 1 0-1.414 1.414l4 4a1 1 0 0 0 1.416 0l4-4a1 1 0 0 0-.002-1.414Z"
            ></path>
            <path
              d="M18 12h-2.55l-2.975 2.975a3.5 3.5 0 0 1-4.95 0L4.55 12H2a2 2 0 0 0-2 2v4a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-4a2 2 0 0 0-2-2Zm-3 5a1 1 0 1 1 0-2 1 1 0 0 1 0 2Z"
            ></path>
          </svg>
          <span class="sr-only">Download</span>
        </button>
        <div
          id="tooltip-download"
          role="tooltip"
          class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
        >
          Download
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
        <button
          type="button"
          data-tooltip-target="tooltip-copy"
          data-tooltip-placement="left"
          class="flex justify-center items-center w-[52px] h-[52px] text-gray-500 hover:text-gray-900 bg-white rounded-full border border-gray-200 dark:border-gray-600 dark:hover:text-white shadow-sm dark:text-gray-400 hover:bg-gray-50 dark:bg-gray-700 dark:hover:bg-gray-600 focus:ring-4 focus:ring-gray-300 focus:outline-none dark:focus:ring-gray-400"
        >
          <svg
            class="w-5 h-5"
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="currentColor"
            viewBox="0 0 18 20"
          >
            <path
              d="M5 9V4.13a2.96 2.96 0 0 0-1.293.749L.879 7.707A2.96 2.96 0 0 0 .13 9H5Zm11.066-9H9.829a2.98 2.98 0 0 0-2.122.879L7 1.584A.987.987 0 0 0 6.766 2h4.3A3.972 3.972 0 0 1 15 6v10h1.066A1.97 1.97 0 0 0 18 14V2a1.97 1.97 0 0 0-1.934-2Z"
            ></path>
            <path
              d="M11.066 4H7v5a2 2 0 0 1-2 2H0v7a1.969 1.969 0 0 0 1.933 2h9.133A1.97 1.97 0 0 0 13 18V6a1.97 1.97 0 0 0-1.934-2Z"
            ></path>
          </svg>
          <span class="sr-only">Copy</span>
        </button>
        <div
          id="tooltip-copy"
          role="tooltip"
          class="absolute z-10 invisible inline-block w-auto px-3 py-2 text-sm font-medium text-white transition-opacity duration-300 bg-gray-900 rounded-lg shadow-sm opacity-0 tooltip dark:bg-gray-700"
        >
          Copy
          <div class="tooltip-arrow" data-popper-arrow></div>
        </div>
      </div>
      <button
        type="button"
        id="web-tool"
        data-dial-toggle="speed-dial-menu-vertical"
        aria-controls="speed-dial-menu-vertical"
        aria-expanded="false"
        class="flex hidden items-center justify-center text-black dark:text-white rounded-full w-14 h-14"
      >
        <svg
          class="w-5 h-5 transition-transform group-hover:rotate-45"
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 18 18"
        >
          <path
            stroke="currentColor"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M9 1v16M1 9h16"></path>
        </svg>
        <span class="sr-only">Open actions menu</span>
      </button>
    </div>

    <!-- 内容区域结束 -->
     @@include('include/footer.html')
  </body>
</html>

<script>
  import { Modal } from "flowbite";

  // 获取菜单节点下所有的下拉条
  let navBox = document.querySelector("#nav-box");
  if (navBox) {
    let dropdowns = navBox.querySelectorAll(".menu-dropdown");
    for (let i = 0; i < dropdowns.length; i++) {
      let dropdownTrag = dropdowns[i].getAttribute("data-toggle");
      console.log(dropdownTrag);
      //鼠标悬浮显示下拉菜单
      dropdowns[i].addEventListener("mouseover", function () {
        document.querySelector("#" + dropdownTrag)?.classList.remove("hidden");
      });
      //鼠标移出隐藏下拉菜单
      dropdowns[i].addEventListener("mouseout", function () {
        document.querySelector("#" + dropdownTrag)?.classList.add("hidden");
      });
      //触摸点击显示下拉菜单
      dropdowns[i].addEventListener(
        "touchstart",
        function (event) {
          document
            .querySelector("#" + dropdownTrag)
            ?.classList.remove("hidden");
        },
        false
      );
      //点击关闭按钮关闭下拉菜单
      document
        .querySelector("#" + dropdownTrag + "-close")
        ?.addEventListener("touchstart", function () {
          document.querySelector("#" + dropdownTrag)?.classList.add("hidden");
        });
    }
  }

  let menuBtn = navBox!.querySelector("#toggle-btn");
  // 移动端导航button是否点击状态
  var menuBtnStatus = false;
  menuBtn!.addEventListener("click", function () {
    menuBtnStatus = !menuBtnStatus;
    if (!menuBtnStatus) {
      const ds = document.querySelectorAll(".mega-menu-full-dropdown");
      ds.forEach(function (item) {
        item.classList.add("hidden");
      });
    }
  });

  const m = document.querySelector("#hot-category-box");
  const y = document.querySelector("#right-box-fixed");
  const webTool = document.querySelector("#web-tool");
  const yLeft = y.offsetLeft;

  const nl = document.querySelector("#nav-left-btn");
  nl.addEventListener("click", function () {
    if (!y.classList.contains("max-xl:hidden")) {
      y.classList.add("max-xl:hidden");
      y.style.top = "14px";
    } else {
      y.classList.remove("max-xl:hidden");
      y.style.top = "68px";
    }
  });

  window.addEventListener("scroll", function () {
    var scrollHeight = document.documentElement.scrollHeight;
    var clientHeight = window.innerHeight;
    var scrollTop =
      window.pageYOffset ||
      document.documentElement.scrollTop ||
      document.body.scrollTop;
    y.style.left = yLeft + "px";
    if (scrollTop > 580) {
      m.classList.add("hot-category-box");
    } else {
      m.classList.remove("hot-category-box");
    }
    if (
      scrollTop > y.offsetTop + y.offsetHeight - 600 &&
      !y.classList.contains("right-box-fixed")
    ) {
      y.classList.add("right-box-fixed");
    } else if (y.offsetHeight > scrollTop) {
      y.classList.remove("right-box-fixed");
    }

    if (scrollTop > 200) {
      webTool.classList.remove("hidden");
    } else {
      webTool.classList.add("hidden");
    }
  });

  // closeDropdownBtn.addEventListener("click", function() {

  // 	setTimeout(function() {
  // 		if (dropdownBtn) {
  // 			dropdownBtn = false;
  // 			drpop.classList.add("hidden");
  // 		} else {
  // 			dropdownBtn = true;
  // 			drpop.classList.remove("hidden");
  // 		}
  // 	}, 100);
  // });

  // dropdownButton.addEventListener("click", function() {
  // 	setTimeout(function() {
  // 		if (dropdownBtn) {
  // 			dropdownBtn = false;
  // 			drpop.classList.add("hidden");
  // 		} else {
  // 			dropdownBtn = true;
  // 			drpop.classList.remove("hidden");
  // 		}
  // 	}, 100)
  // });

  // var themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  // var themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');

  // // Change the icons inside the button based on previous settings
  // if (localStorage.getItem('color-theme') === 'dark' || (!('color-theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
  // 	themeToggleLightIcon.classList.remove('hidden');
  // } else {
  // 	themeToggleDarkIcon.classList.remove('hidden');
  // }

  // var themeToggleBtn = document.getElementById('theme-toggle');

  // themeToggleBtn.addEventListener('click', function () {

  // 	// toggle icons inside button
  // 	themeToggleDarkIcon.classList.toggle('hidden');
  // 	themeToggleLightIcon.classList.toggle('hidden');

  // 	// if set via local storage previously
  // 	if (localStorage.getItem('color-theme')) {
  // 		if (localStorage.getItem('color-theme') === 'light') {
  // 			document.documentElement.classList.add('dark');
  // 			localStorage.setItem('color-theme', 'dark');
  // 		} else {
  // 			document.documentElement.classList.remove('dark');
  // 			localStorage.setItem('color-theme', 'light');
  // 		}

  // 		// if NOT set via local storage previously
  // 	} else {
  // 		if (document.documentElement.classList.contains('dark')) {
  // 			document.documentElement.classList.remove('dark');
  // 			localStorage.setItem('color-theme', 'light');
  // 		} else {
  // 			document.documentElement.classList.add('dark');
  // 			localStorage.setItem('color-theme', 'dark');
  // 		}
  // 	}

  // });

  let carousel = document.querySelector("#tab");
  // let Oicon = document.querySelectorAll('.wrapper i')
  var firstImg = carousel.querySelectorAll("div")[0];
  let isDrageStart = false,
    isDragging = false,
    prevPageX,
    prevScrollLeft,
    positionDiff;
  const dragStart = (e) => {
    isDrageStart = true;
    prevPageX = e.pageX || e.touches[0].pageX;
    prevScrollLeft = carousel.scrollLeft;
  };
  const dragging = (e) => {
    if (!isDrageStart) return;
    e.preventDefault();
    isDragging = true;
    carousel.classList.add("dragging");
    positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
    carousel.scrollLeft = prevScrollLeft - positionDiff;
    // showIcon();
  };
  const dragStop = () => {
    isDrageStart = false;
    carousel.classList.remove("dragging");
    if (!isDragging) return;
    isDragging = false;
    // autoSlide();
  };

  // Oicon.forEach(element => {
  //     element.addEventListener('click', ()=> {
  //         let firstImageWidth = firstImg.clientWidth + 10  //加10因为图片的margin-left为10
  //         carousel.scrollLeft += element.id == 'left' ? -firstImageWidth : firstImageWidth
  //         setTimeout(()=> showIcon(), 60)
  //     })
  // });
  // 左右箭头的icon显示隐藏
  // const showIcon = () => {
  //     let scrollWidth = carousel.scrollWidth - carousel.clientWidth
  //     Oicon[0].style.display = carousel.scrollLeft == 0 ? 'none': 'block'
  //     Oicon[1].style.display = carousel.scrollLeft == scrollWidth ? 'none': 'block'
  // }

  const autoSlide = () => {
    if (carousel.scrollLeft == carousel.scrollWidth - carousel.clientWidth)
      return;
    positionDiff = Math.abs(positionDiff);
    let firstImgWidth = firstImg.clientWidth + 10;
    let valDifference = firstImgWidth - positionDiff;
    if (carousel.scrollLeft > prevScrollLeft) {
      return (carousel.scrollLeft +=
        positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff);
    }
    carousel.scrollLeft -=
      positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
  };
  carousel.addEventListener("mousemove", dragging); //当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
  carousel.addEventListener("touchmove", dragging); //当用户在屏幕上移动手指时会发生 touchmove 事件

  carousel.addEventListener("mousedown", dragStart); //当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件
  carousel.addEventListener("touchstart", dragStart); //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发

  carousel.addEventListener("mouseup", dragStop); //当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件
  carousel.addEventListener("mouseleave", dragStop); //当鼠标指针离开被选元素时，会发生 mouseleave 事件
  carousel.addEventListener("touchend", dragStop); //当手指从屏幕上离开的时候触发

  const listContainer = document.querySelector("#default-styled-tab");
  //是否拖动
  let isDrag = false;
  //拖动距离
  let initialMousePos = 0;
  //距离
  let initialContentOffset = 0;
  let maxLeft =
    listContainer.scrollWidth > 768 ? 768 - listContainer.scrollWidth : 0;

  const heardStart = (e) => {
    if (e.button !== 0) return; // 只处理左键点击
    isDrag = true;
    initialMousePos = e.clientX;
    initialContentOffset = Number(listContainer.style.left.replace("px", ""));
  };

  const heardMove = (e) => {
    //没有按下
    if (!isDrag) return;
    //小于可滑动区域
    else if (maxLeft == 0) {
      return;
    } else {
      //获取移动的距离
      const delta = e.clientX - initialMousePos;
      const left = initialContentOffset + delta;
      //到达最左边
      if (left > 0) {
        listContainer.style.left = "0px";
      } else {
        //中间
        if (left > maxLeft) {
          listContainer.style.left = left + "px";
        }
        //到达最右边
        else {
          listContainer.style.left = maxLeft + "px";
        }
      }
    }
  };

  const heardStop = () => {
    isDrag = false;
  };

  listContainer.addEventListener("mousemove", heardMove); //当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
  //listContainer.addEventListener('touchmove', heardMove) //当用户在屏幕上移动手指时会发生 touchmove 事件

  listContainer.addEventListener("mousedown", heardStart); //当鼠标指针移动到元素上方，并按下鼠标左键时，会发生 mousedown 事件
  //listContainer.addEventListener('touchstart', heardStart) //当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发

  listContainer.addEventListener("mouseup", heardStop); //当鼠标指针移动到元素上方，并松开鼠标左键时，会发生 mouseup 事件
  //listContainer.addEventListener('mouseleave', heardStop) //当鼠标指针离开被选元素时，会发生 mouseleave 事件
  listContainer.addEventListener("touchend", heardStop); //当手指从屏幕上离开的时候触发
</script>
